import React, { Component } from 'react';
import {
	StyleSheet, Text, View, FlatList
} from "react-native";
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';
import { PageStatusIndex } from '../../../component/page-status/PageStatusIndex';

const scale = GLOBAL.SCALE;
export class ListComponent extends Component {
	constructor(props) {
		super(props);
	}
	render() {
		let { dataArray, recordCount, nowList, loadIcon } = this.props;
		return (
			<View style={styles.listBox}>
				<FlatList
					data={dataArray}
					renderItem={(data) => this._renderItem(data)}
					refreshing={loadIcon}
					onRefresh={() => { this._upLoad() }}
					onEndReachedThreshold={1}
					onEndReached={() => { this._downLoad() }}
				/>
				{
					dataArray.length > 0 ? (<PageStatusIndex status="bottom" recordCount={recordCount} nowList={nowList} />) : null
				}
			</View>
		)
	}

	// 一条数据模板
	_renderItem(data) {
		let { orderId, createTime, companyName,
			orderType, quantity, price, orderStatus } = data.item;
		return (
			<View style={styles.list}>
				<View style={styles.listNr}>
					<View style={styles.listHead}>
						<Text style={styles.listHeadLeft}>{orderId}</Text>
						<Text style={styles.listHeadRight}>{createTime}</Text>
					</View>
					<View style={styles.listContent}>
						<View style={styles.listItem}>
							<Text style={styles.listText}>供应商：{companyName}</Text>
							<Text style={styles.listText}>采购品类：{orderType}</Text>
						</View>
						<View style={styles.listItem}>
							<Text style={styles.listText}>数量：{quantity}</Text>
							<Text style={styles.listText}>采购单价：<Text style={styles.themeColor}>￥{price}</Text></Text>
						</View>
					</View>
					<Text style={styles.listBottom}>
						订单状态：{orderStatus}
					</Text>
				</View>
			</View>
		)
	}
	//状态-数据为空
	_emptyFn = () => {
		return (
			<View style={{ flex: 1 }}>
				<PageStatusIndex status="empty" emptyText="没有搜到相关信息哦" />
			</View>
		)
	}
	//底部加载
	_downLoad() {
		this.props.downLoad();
	}
	//下拉更新函数
	_upLoad() {
		this.props.upLoad();
	}
	//状态-加载前
	_loadFn = () => {
		return (
			<View style={{ flex: 1 }}>
				<PageStatusIndex status="loading" />
			</View>
		)
	}


}
const styles = StyleSheet.create({
	listBox: {
		backgroundColor: style.color.dullGrey,
		paddingBottom: 40 * scale,
		flex: 1
	},
	list: {
		backgroundColor: style.color.white,
		marginTop: 12 * scale
	},
	listNr: {
		paddingLeft: 12 * scale,
		paddingRight: 12 * scale
	},
	listHead: {
		flexDirection: 'row',
		justifyContent: 'space-between',
		height: 43 * scale,
	},
	listHeadLeft: {
		fontSize: 13 * scale,
		color: style.color.dark,
		lineHeight: 43 * scale
	},
	listHeadRight: {
		lineHeight: 43 * scale,
		color: style.color.darkGray,
		fontSize: 12 * scale,
	},
	listContent: {
		height: 90 * scale,
		backgroundColor: style.color.light,
		paddingTop: 8 * scale
	},
	listBottom: {
		lineHeight: 43 * scale,
		fontSize: 13 * scale,
		color: style.color.normal
	},
	listItem: {
		height: 20 * scale,
		flexDirection: 'row',
		justifyContent: 'space-between',
		marginTop: 8 * scale,
		marginBottom: 8 * scale,
		paddingLeft: 12 * scale
	},
	listText: {
		width: '50%',
		lineHeight: 20 * scale,
	},
})